<template>
  <div class="header">
    <div>
      <el-avatar
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      ></el-avatar>
    </div>
    <div class="header_menu">
      <el-menu
        router
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="bookIndex">
          <router-link to="/bookIndex">首页</router-link>
        </el-menu-item>
        <el-menu-item index="shop">
          <router-link to="/shop">图书商城</router-link>
        </el-menu-item>

        <el-menu-item index="hot">
          <router-link to="/hot">热销</router-link>
        </el-menu-item>
        <el-menu-item index="car">
          <router-link to="/car">购物车</router-link>
        </el-menu-item>
        <el-menu-item index="favorites">
          <router-link to="/favorites">我的收藏</router-link>
        </el-menu-item>
      </el-menu>
      <div class="line"></div>
    </div>

    <div class="left">
      <el-input
        placeholder="请输入搜索书名"
        v-model="bookname"
        @keyup.enter.native="onSearch"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="onSearch"
        ></el-button>
      </el-input>
    </div>

    <div class="headshot">
      <el-dropdown>
        <el-avatar
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        ></el-avatar>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-user" @click.native="goUser"
            >个人中心</el-dropdown-item
          >
          <el-dropdown-item icon="el-icon-user" @click.native="goOrder"
            >我的订单</el-dropdown-item
          >
          <el-dropdown-item icon="el-icon-user" @click.native="toUpdPassword"
            >修改密码</el-dropdown-item
          >
          <el-dropdown-item icon="el-icon-thumb" @click.native="goOut"
            >退出登录</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: "Headers",

  data() {
    return {
      booksData: [],
      tableData: [],
      input: "",
      pageSize: 10,
      pageNum: 1,
      total: 0,
      bookname: "",

      activeIndex: "1",
      activeIndex2: "1",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    //个人中心
    goUser() {
      console.log("goUser");
      this.$router.push("/mymes");
    },

    // 订单
    goOrder() {
      this.$router.push("/orders");
    },
    // 修改密码 
    toUpdPassword() {
      this.$router.push("/updPassword");

    },
    // 退出登录按钮
    goOut() {
      console.log("logout");

      this.$confirm("您确定要退出登录吗？", "提示", {
        confirmButtonText: "确定", //确认按钮的文字显示
        type: "warning",
        center: true, //文字居中显示
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "退出登录成功",
          });
          //跳转到登录页面
          this.$router.push("/login");
          //清空数据
          localStorage.clear();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出登录",
          });
        });
    },
    // 图书搜索
    onSearch() {
      this.$axios
        .post(this.$httpUrl + "/books/listPage", {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          param: {
            bookname: this.bookname,
          },
        })
        .then((res) => res.data)
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.$router.replace("/search");
            this.tableData = res.data;
            this.total = res.total;
          } else "获取数据失败";
        });
    },
  },
  beforeMount() {
    //设置默认页面
  },
  created() {
    this.$router.push("/bookIndex");
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .header_menu {
    .el-dropdown-link {
      cursor: pointer;
      color: #409eff;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
  }
}
</style>